<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HCJ_Test</title>
		<!--title图标-->
		<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
		<!--CSS代码-->
		<link href="/css/learn_test.css" rel="stylesheet" type="text/css">
		<!--JS代码-->
		<script src="/js/learn_test.js"></script>
		<!--页面自动刷新频率-->
		<!--<meta http-equiv="refresh" content="30">-->
		<!--指定本页面链接标签默认链接-->
		<!--<base href="http://www.runoob.com/images/" target="_blank">-->

		<!--HTML 样式代码-->
		<style type="text/css">
			h1 {color:red;}
		</style>
	</head>

	<body>
		<!--HTML test-->
		<div id="html_test">
			<!--HTML 标题-->
			<h1>这是标题 1</h1>
			<h2>这是标题 2</h2>
			<h3>这是标题 3</h3>
			<h4>这是标题 4</h4>
			<h5>这是标题 5</h5>
			<h6>这是标题 6</h6>
			<!--HTML 段落-->
			<p>这是一个段落。</p>
			<!--HTML 文本格式化-->
			<b>加粗文本</b><br>
			<i>斜体文本</i><br>
			<code>电脑自动输出</code><br>
			这是 <sub>下标</sub> 和 <sup>上标</sup><br><br>
			<em>这是着重文字</em><br>
			<small>这是小号字</small><br>
			<big>这是字体放大</big><br>
			<strong>这是加重语气</strong><br>
			<ins>这是插入字</ins><br>
			<del>这是删除字</del><br><br>

			<!--HTML pre标签对空行和空格控制-->
			<pre>
				此例演示如何使用 pre 标签
				对空行和    空格
				进行控制
			</pre>

			<!--HTML 文字显示方向-->
			<p>该段落文字从左到右显示。</p>
			<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

			<!--HTML 链接-->
			<a href="index.html"> 是一个指向本网站中的一个页面的链接。</a><br>
			<a href="https://www.microsoft.com/" target="_self">是一个指向万维网上的页面的链接。</a><br>
			<a href="https://www.runoob.com" target="_blank">这是一个链接使用了 href 属性, 并再新标签中打开.</a><br>
			<a href="/img/favicon.ico" download="favicon.ico">下载文件</a><br>
			<a href="#html_test"> 链接到页面中的某个部分</a><br>
			<a href="https://www.example.com" style="color: red;">直接在元素上定义CSS样式</a><br>
			<a href="#">导航到页面顶部</a><br>
			<a href="javascript:void(0)">阻止默认行为，不刷新页面</a><br>
			<a href="">刷新当前页面</a><br>
			<a href="about:blank" style="text-decoration:none;">打开空白页面(无下划线)</a><br>
			<a href="#" role="button">链接表现为按钮，无默认行为</a><br>

			<!--HTML 图像-->
			<p>一个来自文件夹中的图像:</p>
			<img src="/img/favicon.ico" width="258" height="172" /><br>
			<p>一个来自互联网中的图像:</p>
			<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

			<!--HTML 表格-->
			<h2> 表格:</h2>
			<table border="1">
				<thead>
					<tr>
						<th>列标题1</th>
						<th>列标题2</th>
						<th>列标题3</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>行1,列1</td>
						<td>行1,列2</td>
						<td>行1,列3</td>
					</tr>
					<tr>
						<td>行2,列1</td>
						<td>行2,列2</td>
						<td>行2,列3</td>
					</tr>
				</tbody>
			</table>

			<!--HTML 列表-->
			<h4>有序列表:</h4>
			<ol>
				<li>Coffee</li>
				<li>Tea</li>
				<li>Milk</li>
			</ol>
			<h4>无序列表:</h4>
			<ul>
				<li>Coffee</li>
				<li>Tea</li>
				<li>Milk</li>
			</ul>

			<!--HTML 内联元素-->
			<span class="key" id="data_key">data_key:</span>
			<span class="value" id="data_val">data_value</span>

			<!--HTML 布局-->
			<div id="container" style="width:500px">
				<div id="header" style="background-color:#FFA500;">
					<h1 style="margin-bottom:0;">主要的网页标题</h1>
				</div>
				<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
					<b>菜单</b><br>
					HTML<br>
					CSS<br>
					JavaScript
				</div>
				<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
					内容在这里
				</div>
				<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
					版权 © runoob.com
				</div>
			</div> <br>

			<!--HTML 表单和输入-->
			<form action="/cgi/form_test.sh" method="post">
				<fieldset>
					<legend>Personal information:</legend>
					<!--文本输入框-->
					<label for="name">用户名:</label>
					<input id="name" name="name" type="text" required placeholder="Enter your name">
					<br>
					<!--密码输入框-->
					<label for="password">密码:</label>
					<input id="password" name="password" type="password" required placeholder="Enter your password">
					<br>
					<!-- 单选按钮 -->
					<label>性别:</label>
					<input type="radio" id="male" name="gender" value="male" checked>
					<label for="male">男</label>
					<input type="radio" id="female" name="gender" value="female">
					<label for="female">女</label>
					<br>
					<!-- 复选框 -->
					<input type="checkbox" id="subscribe" name="subscribe" checked>
					<label for="subscribe">订阅推送信息</label>
					<input type="checkbox" id="allowed" name="allowed">
					<label for="allowed">允许推送</label>
					<input type="checkbox" id="info_topic" name="info_topic">
					<label for="info_topic">信息主题</label>
					<br>
					<!-- 下拉列表 -->
					<label for="country">国家:</label>
					<select id="country" name="country">
						<option value="cn">CN</option>
						<option value="usa">USA</option>
						<option value="uk">UK</option>
					</select>
					<br>
					<!-- 提交按钮 -->
					<input type="submit" value="提交">
				</fieldset>
			</form>
			<br>

			<!--HTML 框架-->
			<h2>HTML框架页面</h2>
			<iframe src="/html/video_test.html" width="660" height="500" frameborder="1"></iframe>
			<h2>使用 iframe 来显示目标链接页面</h2>
			<iframe src="demo_iframe.htm" name="iframe_a" width="600" height="400"></iframe>
			<p><a href="https://www.runoob.com" target="iframe_a">在iframe中显示链接页面</a></p>

			<!--HTML 颜色名-->

		</div>
		<hr>
		<hr>

		<!--JS test-->
		<div class="js_test">
			<h1>JS_Demo_1:</h1>
			<p id="jsdemo_1">这里显示时间戳</p>
			<button id="jsdemo_1_bt" type="button" title="Click me" onclick="displayDate()">显示日期</button>
		</div>
		<hr>

		<div class="js_test">
			<h1>JS_Demo_2:</h1>
			<p id="jsdemo_2">js demo 2</p>
		</div>
		<hr>

	</body>
</html>

